<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import Carousel from "./Carousel.svelte";
    import { Link } from "../Typography";
    import Space from "../Space/Space.svelte";

    import img1 from "../../assets/carousel/1.jpg";
    import img2 from "../../assets/carousel/2.jpg";
    import img3 from "../../assets/carousel/3.jpg";
    import img4 from "../../assets/carousel/4.jpg";
    import img5 from "../../assets/carousel/5.jpg";
    import CarouselItem from "./CarouselItem.svelte";
    import { Image } from "../Image";
    import { RadioGroup } from "../RadioGroup";
    import { Switch } from "../Switch";
    import Button from "../Button/Button.svelte";

    const { Story } = defineMeta({
        title: "Components/Views/Carousel",
        component: Carousel,
        subcomponents: { CarouselItem },
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    let dotAlign = $state<"left" | "top" | "right" | "bottom" | undefined>("bottom");
    let dir = $state<any>("h");
    let arrow = $state<boolean>(false);
    let dotType = $state<any>("dot");
    let effect = $state("slide");
</script>

<Story name="Default">
    {#snippet template(args)}
        {@const arr = [img1, img2, img3, img4, img5]}
        <div style="width: 550px">
            <Carousel>
                {#each arr as item}
                    <CarouselItem>
                        <div class="demo-carousel">
                            <Image src={item} fit="cover" />
                        </div>
                    </CarouselItem>
                {/each}
            </Carousel>
        </div>
    {/snippet}
</Story>

<Story name="Arrow">
    {#snippet template(args)}
        {@const arr = [img1, img2, img3, img4, img5]}
        <div style="width: 700px">
            <Carousel arrow>
                {#each arr as item}
                    <CarouselItem>
                        <div class="demo-carousel">
                            <Image src={item} fit="cover" />
                        </div>
                    </CarouselItem>
                {/each}
            </Carousel>
        </div>
    {/snippet}
</Story>

<Story name="AutoPlay">
    {#snippet template(args)}
        <div style="width: 700px">
            <Carousel arrow autoPlay>
                <CarouselItem>
                    <div class="demo-carousel">
                        <Image src={img1} fit="cover" />
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="demo-carousel">
                        <Image src={img2} fit="cover" />
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="demo-carousel">
                        <Image src={img3} fit="cover" />
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="demo-carousel">
                        <Image src={img4} fit="cover" />
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="demo-carousel">
                        <Image src={img5} fit="cover" />
                    </div>
                </CarouselItem>
            </Carousel>
        </div>
    {/snippet}
</Story>

<Story name="DotPosition">
    {#snippet template(args)}
        {@const arr = [img1, img2, img3, img4, img5]}
        <Space>
            <RadioGroup
                stick
                bind:value={dotType}
                data={[
                    { label: "dot", value: "dot" },
                    { label: "line", value: "line" },
                    { label: "columnar", value: "columnar" },
                ]}
            />
        </Space>
        <Space>
            <RadioGroup
                stick
                bind:value={dotAlign}
                data={[
                    { label: "left", value: "left" },
                    { label: "top", value: "top" },
                    { label: "right", value: "right" },
                    { label: "bottom", value: "bottom" },
                ]}
            />
        </Space>
        <Space>
            <RadioGroup
                stick
                bind:value={dir}
                data={[
                    { label: "横向", value: "h" },
                    { label: "纵向", value: "v" },
                ]}
            />
        </Space>
        <Space>
            <Switch bind:checked={arrow} labels={["show arrow", "hide arrow"]}></Switch>
        </Space>
        <div style="width: 700px">
            <Carousel {dotAlign} {dir} {dotType} draggable {arrow}>
                {#each arr as item}
                    <CarouselItem>
                        <div class="demo-carousel">
                            <Image src={item} fit="cover" />
                        </div>
                    </CarouselItem>
                {/each}
            </Carousel>
        </div>
    {/snippet}
</Story>
<Story name="ItemsPerView">
    {#snippet template(args)}
        {@const arr = [img1, img2, img3, img4, img5]}
        <div style="width: 700px; height: 250px;">
            <Carousel itemsPerView={3} draggable gutter={20}>
                {#each arr as item}
                    <CarouselItem>
                        <div class="demo-carousel">
                            <Image src={item} fit="cover" />
                        </div>
                    </CarouselItem>
                {/each}
            </Carousel>
        </div>
    {/snippet}
</Story>

<Story name="ItemsPerViewAuto">
    {#snippet template(args)}
        {@const arr = [img1, img2, img3, img4, img5]}
        {@const widths = [200, 300, 400, 500, 600]}
        <div style="width: 700px; height: 250px;">
            <Carousel itemsPerView="auto" draggable gutter={20}>
                {#each arr as item, index}
                    <CarouselItem>
                        <div class="demo-carousel" style={`width: ${widths[index]}px`}>
                            <Image src={item} fit="cover" />
                        </div>
                    </CarouselItem>
                {/each}
            </Carousel>
        </div>
    {/snippet}
</Story>

<Story name="Gutter" args={{ gutter: 20 }}>
    {#snippet template(args)}
        {@const arr = [img1, img2, img3, img4, img5]}
        <div style="width: 700px;">
            <Carousel draggable {...args}>
                {#each arr as item}
                    <CarouselItem>
                        <div class="demo-carousel">
                            <Image src={item} fit="cover" />
                        </div>
                    </CarouselItem>
                {/each}
            </Carousel>
        </div>
    {/snippet}
</Story>

<Story name="Type" args={{ current: 0 }}>
    {#snippet template(args)}
        {@const arr = [img1, img2, img3, img4, img5]}
        <Space>
            <RadioGroup
                stick
                bind:value={effect}
                data={[
                    { label: "slide", value: "slide" },
                    { label: "fade", value: "fade" },
                    { label: "card", value: "card" },
                ]}
            />
        </Space>
        <div style="width: 700px;">
            <Carousel draggable {effect} bind:activeIndex={args.current}>
                {#each arr as item}
                    <CarouselItem>
                        <div class="demo-carousel">
                            <Image src={item} fit="cover" />
                        </div>
                    </CarouselItem>
                {/each}
            </Carousel>
        </div>

        <Button
            onclick={() => {
                args.current = (args.current + 1) % 5;
            }}>Next</Button
        >
        <Button
            onclick={() => {
                args.current = (args.current + 4) % 5;
            }}>Prev</Button
        >
    {/snippet}
</Story>
